<template>
  <el-container class="allbody" onscroll="false">
   

    <el-main style="height: 100%; z-index: 5">
      <el-row style="width: 100%; height: 10%">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin-top: 20px; margin-left: 10px"
        >
          <el-form-item>
            <el-input
              v-model="Equ"
              class="form-input"
              style="width: 300px"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="Sydw"
              class="form-input"
              style="width: 500px"
              disabled
            ></el-input>
          </el-form-item>
          <!-- <el-select v-model="timeValue" @change="selectCheckDate">
            <el-option
              v-for="item in timeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <el-select v-model="structValue" @change="selectStruct">
            <el-option
              v-for="item in structOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.value }}</span>
            </el-option>
          </el-select>

          <!-- <el-form-item>
            <el-button style="color: #009bfe" @click="show">查询</el-button>
          </el-form-item> -->
          <el-form-item style="position: absolute; right: 150px">
            <i class="el-icon-back" style="color: black; font-size: 25px"></i>
            <el-button
              type="text"
              style="color: black; font-size: 22px"
              @click="switchList"
              >返回上一级</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-if="structValue == '主梁'">
        <el-row style="height: 100%; width: 100%">
          <div style="height: 100%; width: 100%" >
            <monitoring-zhuliang
              :indexOfValue="selectPoint"
              height="400px"
              width="100%"
            ></monitoring-zhuliang>
          </div>
        </el-row>
        <el-row>
          <div class="point-container" >
            <div class="img">
              <div class="point" :style="pointPosition"></div>
              <img
              style="margin-top: 20px; margin-left: 0px; width: 100%;height:auto;"
              src="../../../../assets/image/zl.jpg"
              />
            </div>
           <div class="table">
            <el-table
              :data="zhuliangTableData"
              overflow: auto
              style="height: 98%; margin-left:50px; margin-top:20px; margin-right:0px; width:88%;"
              fit
            >
              <el-table-column width="80">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.selected"
                    @change="selectPointChange(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="Id" label="序号" width="250">
              </el-table-column>
              <el-table-column prop="t001" label="监测位置"> </el-table-column>
            </el-table>
           </div>
          </div>
        </el-row>
      </el-row>
       <el-row v-if="structValue == '减速机'">
        <el-row style="height: 100%; width: 100%">
          <div style="height: 100%; width: 100%" >
            <monitoring-jiansuji
              :indexOfValue="selectPoint"
              height="400px"
              width="100%"
            ></monitoring-jiansuji>
          </div>
        </el-row>
        <el-row>
          <div class="point-container" >
            <div class="img">
              <div class="point" :style="pointPosition"></div>
              <img
              style="margin-top: 20px; margin-left: 0px; width: 100%;height:auto;"
              src="../../../../assets/image/jsj.png"
              />
            </div>
           <div class="table">
            <el-table
              :data="jiansujiTableData"
              overflow: auto
              style="height: 98%; margin-left:50px;  margin-top:20px; margin-right:0px; width:88%;"
              fit
            >
              <el-table-column width="80">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.selected"
                    @change="selectPointChange(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="Id" label="序号" width="250">
              </el-table-column>
              <el-table-column prop="t001" label="监测位置"> </el-table-column>
            </el-table>
           </div>
          </div>
        </el-row>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ElContainer from "element-ui/packages/container/src/main";
import ElAside from "element-ui/packages/aside/src/main";
import ElHeader from "element-ui/packages/header/src/main";
import ElMain from "element-ui/packages/main/src/main";
import MonitoringZhuliang from "./monitoring-zhuliang.vue";
import MonitoringJiansuji from './monitoring-jiansuji.vue'

import { get, get as userType, del, dels } from "@/api/sys/connSysAuthApi";
import { parseTime } from "@/utils";
import { req } from "@/api/base/BaseApi";

import Calendar from "vue-calendar-component";

export default {
  name: "detail",
  components: { Calendar, MonitoringZhuliang ,MonitoringJiansuji},
  comments: {
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
  },
  props: {
    detailList: Array,
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    tableRowStyle({ row, rowIndex }) {
      return {
        "background-color": "#02152f",
        color: "#fff",
      };
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #2ec7c9;color: #fff;font-weight: 500;";
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    selectCheckDate(value) {
      // 根据选中的日期切换报告
      console.log("选中的值是:", value);
      this.checkData = this.checkDataList[+value];
    },
    selectStruct(value) {
      // 选中不同的结构
      console.log("选中结构：", value);
      if (value == "主梁") {
        this.pointPosition = this.zhuliangPosition["1"];
      }
      if (value == "减速机") {
        this.pointPosition = this.jiansujiPosition["1"];
      }
    },
    show() {
      this.mydate = this.year + "-" + this.month + "-" + this.day;
      console.log(this.mydate);
    },
    switchList() {
      this.$emit("switchList");
    },
    yearChange(id, type) {
      this.year = id;
    },
    monthChange(id, type) {
      this.month = id;
    },
    dayChange(id, type) {
      this.day = id;
    },
    selectPointChange(row) {
      console.log("选中了监测点：", row.Id, row.selected);
      if (this.structValue == "主梁") {
        if (row.selected == true) {
          // 遍历所有行，取消其他行的选中状态
          for (const item of this.zhuliangTableData) {
            if (item.Id != row.Id) {
              item.selected = false;
            }
          }
          // 选中了当前行，进行一些操作
          this.selectPoint = row.Id - 1 + "";
          // 切换测点绿点位置
          this.pointPosition = this.zhuliangPosition[row.Id + ""];
          // ... ...
        } else {
          // 取消选中当前行的操作无效化，同时有且会有一行被选中
          row.selected = true;
        }
      } else if (this.structValue == "减速机") {
        if (row.selected == true) {
          // 遍历所有行，取消其他行的选中状态
          for (const item of this.jiansujiTableData) {
            if (item.Id != row.Id) {
              item.selected = false;
            }
          }
          // 选中了当前行，进行一些操作
          this.selectPoint = row.Id - 1 + "";
          // 切换测点绿点位置
          this.pointPosition = this.jiansujiPosition[row.Id + ""];
          // ... ...
        } else {
          // 取消选中当前行的操作无效化，同时有且会有一行被选中
          row.selected = true;
        }
      }
    },
  },
  created() {
    // 默认选中分类：结构
    this.structValue = "主梁";
    this.pointPosition = this.zhuliangPosition["1"];
  },
  computed: {
    Equ() {
      return "设备编号：" + this.EquValue;
    },
    Sydw() {
      return "使用单位：" + this.SydwValue;
    },
    ifSelected() {
      return (Id) => {
        if (Id == 1) return true;
        else return false;
      };
    },
  },
  data() {
    return {
      EquValue: "一钢轧 008", // 当前设备的（内部）编号
      SydwValue: "马鞍山钢铁股份有限公司", // 当前设备的的使用单位
      timeOption: [
        // 监控数据的时间，按天划分，一天24*60，一分钟取一个数据
      ],
      timeValue: "", // 当前选中的日期
      monitoringData: {}, // 当前选中
      structOption: [
        {
          label: "分类：    主梁",
          value: "主梁",
        },
        {
          label: "分类：    减速机",
          value: "减速机",
        },
      ], // 结构可选项
      structValue: "", // 当前选中的分类
      pointPosition: "", // 当前测点位置,例如 "top:45%;left:45%;"
      zhuliangPosition: {
        1: "top:12%;left:52%",
        2: "top:19%;left:60%",
        3: "top:23%;left:45%",
        4: "top:37%;left:39%",
        5: "top:44%;left:33%",
        6: "top:53%;left:26%",
        7: "top:62%;left:18%",
        8: "top:66%;left:22%",
        9: "top:44%;left:25%",
        10: "top:35%;left:33%",
        11: "top:28%;left:39%",
      },
      jiansujiPosition: {
        1:"top:13%;left:25%;",
        2:"top:14%;left:27%;",
        3:"top:14%;left:46%;",
        4:"top:22%;left:67%;",
        5:"top:40%;left:86%;",
        6:"top:44%;left:86%;",
        7:"top:41%;left:35%;",
        8:"top:50%;left:56%;",
      },
      //--------------------------------------------------------
      date: new Date(),
      year: "",
      month: "",
      day: "",
      mydate: "",

      location: "",

      city: "",

      calendar: {},

      //---------------------------------------------------------
      selectPoint: "0", // 选中的监测点的Id
      tableData: [], // 当前选中的分类下的监测点信息
      zhuliangTableData: [
        // 分类：结构下的监测点信息
        // 监测点信息
        {
          Id: 1,
          t001: "副主梁与端梁连接上盖板（西）",
          selected: true,
        },
        {
          Id: 2,
          t001: "副主梁连接上盖板（西）",
          selected: false,
        },
        {
          Id: 3,
          t001: "主梁端部变截面连接焊缝",
          selected: false,
        },
        {
          Id: 4,
          t001: "北侧主梁下盖板1/4 跨",
          selected: false,
        },
        {
          Id: 5,
          t001: "北侧主梁下盖板1/2 跨",
          selected: false,
        },
        {
          Id: 6,
          t001: "北侧主梁下盖板1/4 跨",
          selected: false,
        },
        {
          Id: 7,
          t001: "副主梁连接上盖板（东)",
          selected: false,
        },
        {
          Id: 8,
          t001: "副主梁与端梁连接上盖板（东）",
          selected: false,
        },
        {
          Id: 9,
          t001: "北侧主梁主腹板1/4 跨（西）",
          selected: false,
        },
        {
          Id: 10,
          t001: "北侧主梁主腹板1/2 跨",
          selected: false,
        },
        {
          Id: 11,
          t001: "北侧主梁主腹板1/4 跨（东）",
          selected: false,
        },
      ],
      jiansujiTableData: [
        {
          Id: 1,
          t001: "高速轴轴承座",
          selected: true,
        },
        {
          Id: 2,
          t001: "高速轴轴承座",
          selected: false,
        },
        {
          Id: 3,
          t001: "低速轴轴承座",
          selected: false,
        },
        {
          Id: 4,
          t001: "低速轴轴承座",
          selected: false,
        },
        {
          Id: 5,
          t001: "高速轴轴承座",
          selected: false,
        },
        {
          Id: 6,
          t001: "高速轴轴承座",
          selected: false,
        },
        {
          Id: 7,
          t001: "低速轴轴承座",
          selected: false,
        },
        {
          Id: 8,
          t001: "低速轴轴承座",
          selected: false,
        },
      ],
    };
  },
  filters: {
    userTypeFilter(type) {
      let typeText = type;
      userTypes.forEach((val) => {
        if (type === val.value) {
          typeText = val.name;
        }
      });
      return typeText;
    },
    menuFilter(ids) {
      let length = 0;
      if (ids) {
        length = ids.length;
      }
      return length;
    },
    dateTimeFilter(time) {
      return parseTime(time);
    },
  },
  mounted() {
    let _this = this; //声明一个变量指向vue实例this,保证作用域一致
    (this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000)),
      console.log(this.$route.path); // 输出当前页面的路由，如：/home
  },
};
</script>

<style lang="less" scoped>
.headerbackgroud {
}
.allbody {
  width: 100%;
  height: 1050px;
}
.rowclass {
  width: 100%;
  height: 50%;
}

#text {
  -webkit-text-fill-color: white;
}
.select {
  color: white;
}
.hello {
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的样式
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: center;
  }
}
.form-input /deep/ .el-input__inner {
  color: rgb(0, 0, 0) !important;
}
.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}
.map1 {
  margin-left: 580px;
  margin-top: 230px;
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  margin-left: 625px;
  margin-top: 275px;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}
.map3 {
  margin-left: 650px;
  margin-top: 300px;
  z-index: 1;
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

.point-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div.img {
    width: 45%;
    position: relative;
    .point {
      position: absolute;
      background-color: #18af55;
      width: 15px;
      height: 15px;
      z-index: 6;
      border: 3px solid white;
      border-radius: 50%;
      // top: 45%;
      // left: 45%;
    }
  }
  div.table {
    width: 50%;
  }
}
</style>
